<template>
<div>

    <el-button type="primary" round @click="dialogVisible = true">添加</el-button><br>
    <el-input v-model="input" placeholder="请输入更新的ID" size="20"></el-input>
    <el-button type="primary" round @click="huoqu">更新</el-button><br>
    <el-button type="primary" round @click="dialogVisible2 = true">删除</el-button><br>
 <!-- 添加 -->
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">

  <input type="text" v-model="data1.name" placeholder="请输入添加的部门">
  <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="tianjia">添加</el-button>
  </span>
</el-dialog>
 <!-- 修改 -->
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible1"
  width="30%"
  :before-close="handleClose">
   <input type="text" v-model="data.id"><br><br>
  <input type="text" v-model="data.name">
 
  <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="xiugai">更新</el-button>
  </span>
</el-dialog>
 <!--删除 -->
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible2"
  width="30%"
  :before-close="handleClose">
  <input type="text" v-model="id" placeholder="请输入删除的ID"><br><br>

  <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="shanchu">删除</el-button>
  </span>
</el-dialog>
</div>
  
</template>

<script>
import Axios from 'axios'
export default {
    data(){
        return{
            // 要更新的数据id
            input:'',
            dialogVisible: false,  // 添加的弹框
            dialogVisible1: false, // 修改的弹框
            dialogVisible2: false, // 删除的弹框
            data:[],    // 修改后的数据
            id:'',    // 要删除的数据id
            data1:{   // 添加的数据
                id:0,   // id默认为0 ，也可以不写
                name:''  // 添加的部门
            }
        }
    },
    methods:{
        // 获取要更新的数据
        huoqu(){
            this.dialogVisible1 = true
            Axios.get('http://127.0.0.1:8000/department/'+this.input+'/').then(resp=>{
                console.log(resp)
                this.data = resp.data
            }).catch(err=>{
                console.log(err)
            })           
        },
        // 修改数据
        xiugai(){
            this.dialogVisible1 = false
            Axios.put('http://127.0.0.1:8000/department/'+this.input+'/',this.data).then(resp=>{
                console.log(resp)
                alert('更新成功')
            }).catch(err=>{
                console.log(err)
            })
        },
        // 添加数据
        tianjia(){
            this.dialogVisible = false
            Axios.post('http://127.0.0.1:8000/department/',this.data1).then(resp=>{
                console.log(resp)
                alert('添加成功')
            }).catch(err=>{
                console.log(err)
            })
        },
        // 删除数据
        shanchu(){
            this.dialogVisible2 = false
            Axios.delete('http://127.0.0.1:8000/department/'+this.id+'/').then(resp=>{
                console.log(resp)
                alert('删除成功')
            }).catch(err=>{
                console.log(err)
            })
        }
    }
}
</script>

<style>

</style>